<!--  -->
<template>
  <div class="carousel-container">
    <el-carousel :interval="2000" arrow="always" autoplay="true" indicator-position="outside" height="600px">
      <el-carousel-item v-for="(item, index) in images" :key="index">
        <img :src="item.src" alt="" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import axios from "axios";
import { ElMessage } from "element-plus";
import { ref, reactive, getCurrentInstance, nextTick, triggerRef } from "vue";
import { useRouter } from 'vue-router';

const images = ref([
  { src: '/src/assets/img/crm1.png' },
  { src: '/src/assets/img/crm2.png' },
  { src: '/src/assets/img/crm3.png' },
  { src: '/src/assets/img/crm4.png' },
  { src: '/src/assets/img/crm5.png' },
  { src: '/src/assets/img/crm6.png' },
]);
</script>

<style scoped>

    .carousel-container {
        width: 80%;
        margin-right: 200px;
        margin-left: 50px;
    }

    .carousel-image {
        width: 100%;
        height: 100%;
        display: block;
    }

</style>